<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="70px">
      <el-form-item label="反馈类型" prop="pmsFeedbackType">
        <el-select v-model="queryParams.pmsFeedbackType" placeholder="请选择反馈类型" clearable style="width: 200px">
          <el-option v-for="item in feedbackTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="反馈人" prop="createrName">
        <el-input v-model="queryParams.createrName" style="width: 200px" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="创建时间" prop="createDate">
        <el-date-picker
          v-model="queryParams.createDate"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
 
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作栏 -->
    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['pms:feedback:export']"
        >导出</el-button>
      </el-col>
    </el-row> -->

    <!-- 表格 -->
    <el-table border v-loading="loading" :data="feedbackList" style="width: 100%">
      <el-table-column label="反馈类型" prop="pmsFeedbackType" min-width="120">
        <template #default="scope">
          {{ feedbackTypeOptions.find(item => item.value === scope.row.pmsFeedbackType)?.label }}
        </template>
      </el-table-column>
      <el-table-column label="反馈内容" prop="pmsFeedbackContent" min-width="300">
        <template #default="scope">
          <el-popover
            placement="top-start"
            :width="400"
            trigger="hover"
            v-if="scope.row.pmsFeedbackContent && scope.row.pmsFeedbackContent.length > 50"
          >
            <template #default>
              <div style="white-space: pre-wrap;">{{ scope.row.pmsFeedbackContent }}</div>
            </template>
            <template #reference>
              <span style="cursor: pointer; color: #409eff;">
                {{ scope.row.pmsFeedbackContent.substring(0, 50) }}...
              </span>
            </template>
          </el-popover>
          <span v-else>{{ scope.row.pmsFeedbackContent }}</span>
        </template>
      </el-table-column>
      <el-table-column label="反馈人" prop="createrName" min-width="120">
        <template #default="scope">
          {{ scope.row.createrName }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createDate" min-width="140">
        <template #default="scope">
          {{ scope.row.createDate }}
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />


  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import dayjs from 'dayjs'
import { listFeedback, exportFeedback } from '@/api/house/feedbacklist'

const { proxy } = getCurrentInstance()

// 反馈类型选项
const feedbackTypeOptions = [
  { value: 1, label: '投票问题' },
  { value: 2, label: '软件使用问题' },
  { value: 9, label: '其他问题' }
]

const loading = ref(false)
const feedbackList = ref([])
const total = ref(0)

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    pmsFeedbackType: '',
    pmsFeedbackContent: '',
    createrId: '',
    createrName: '',
    createDate: '',
    keyword: ''
  }
})
const { queryParams } = toRefs(data)



function getList() {
  loading.value = true
  // 处理日期参数
  const params = { ...queryParams.value }
  // 处理创建日期
  if (Array.isArray(params.createDate) && params.createDate.length === 2) {
    params.startCreateDate = dayjs(params.createDate[0]).format('YYYY-MM-DD HH:mm:ss')
    params.endCreateDate = dayjs(params.createDate[1]).format('YYYY-MM-DD HH:mm:ss')
    delete params.createDate
  }
  listFeedback(params).then(res => {
    feedbackList.value = res?.rows || []
    total.value = res?.total || 0
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
  Object.keys(queryParams.value).forEach(key => {
    if (Array.isArray(queryParams.value[key])) {
      queryParams.value[key] = []
    } else {
      queryParams.value[key] = ''
    }
  })
  handleQuery()
}

function handleExport() {
  proxy.download(
    'pms/feedback/export',
    { ...queryParams.value },
    `feedback_${new Date().getTime()}.xlsx`
  )
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.mb8 {
  margin-bottom: 8px;
}

.el-table {
  margin-top: 10px;
}
</style>